<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-13 18:49:42
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-20 22:08:20
 * @FilePath: \郭招娣\app\src\views\Comment.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-card class="title-card" shadow="always">
      <div class="card-item">
        标题:<el-input
          v-model="formInline.title"
          placeholder="请输入文章标题"
          style="width: 200px"
        />
        状态:<el-select
          v-model="formInline.status"
          class="m-2"
          placeholder="Select"
          size="large"
          style="margin-right: 10px"
        >
          <el-option
            v-for="(item, index) in option"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
        分类:<el-select
          class="m-2"
          placeholder="Select"
          size="large"
          style="margin-left: 10px"
        >
          <el-option />
        </el-select>
      </div>
      <div class="btns">
        <el-button type="primary" @click="searchChange">搜索</el-button>
        <el-button>重置</el-button>
      </div>
    </el-card>

    <el-card class="knowledge-card">
      <div
        style="display: flex; align-items: center; justify-content: flex-end"
      >
        <el-button type="primary" @click="addKnowLists" style="margin: 10px"
          >+新建</el-button
        >
      </div>
      <div style="display: flex; flex-wrap: nowrap">
        <dl v-for="(v, i) in tableData" :key="i" class="dl">
          <dt>
            <el-image
              style="width: 100%; height: 180px"
              :src="v.img"
              fit="cover"
            />
          </dt>
          <dd
            style="
              width: 100%;
              border: 1px solid #ccc;
              border-top: 0;
              padding: 10px;
            "
          >
            <p>{{ v.name }}</p>
            <p>{{ v.title }}</p>
          </dd>
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-around;
              padding: 10px;
              border: 1px solid #ccc;
              border-top: 0;
            "
          >
            <el-icon :size="20" @click="edit"> <Edit /></el-icon>
           <div @click="publish(v)">
             <el-icon :size="20" v-if="v.state=='false'"> <Upload /></el-icon>
             <el-icon :size="20" v-else-if="v.state=='true'"> <Download /></el-icon>

           </div>
            <el-icon :size="20" @click="set(v)"> <Edit /></el-icon>
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              :icon="InfoFilled"
              icon-color="orange"
              title="确认删除这个文章？"
              @confirm="del(v)"
            >
              <template #reference>
                <el-icon :size="20"> <Share /></el-icon>
              </template>
            </el-popconfirm>
          </div>
        </dl>
      </div>
      <!-- 分页 -->
      <el-pagination
        style="
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin-top: 10px;
        "
        small
        background
        :page-size="pageSize"
        :page-sizes="[1, 2, 3, 4]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <el-drawer v-model="drawer" :direction="direction" size="500px">
        <template #title>
          <h4>新建知识库</h4>
        </template>
        <template #default>
          <div>
            <p style="margin: 10px">
              名称 <el-input v-model="name" style="width: 400px" />
            </p>
            <p style="margin: 10px">
              描述
              <el-input v-model="title" style="width: 400px; height: 100px" />
            </p>
            <p>
              <el-form-item label="评论" prop="delivery">
                <el-switch v-model="delivery" />
              </el-form-item>
            </p>
            <p style="display: flex">
              <span>封面</span>
              <el-upload
                style="width: 400px; margin: 10px"
                class="upload-demo"
                drag
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
              >
                <img :src="img" class="avatar" style="width:400px;"/>
              </el-upload>
            </p>

            <el-drawer
              v-model="innerDrawer"
              title="I am the title"
              size="500px"
              :with-header="false"
            >
              <KnowledgeDrawer />
            </el-drawer>

            <el-button @click="open">选择文件</el-button>
          </div>
        </template>
        <template #footer>
          <div>
            <el-button @click="drawer = false">cancel</el-button>
            <el-button type="primary" @click="confirmClick">confirm</el-button>
          </div>
        </template>
      </el-drawer>
    </el-card>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import KnowledgeDrawer from "../views/KnowledgeDrawer/KnowledgeDrawer.vue";
import {
  asyncKnowledgeLists,
  asyncDeleteKnowledgeLists,
  asyncAddKnowledgeLists,
  knowledgePublish
} from "../api/knowledge";
import { ElMessage ,InfoFilled} from "element-plus";

import { Edit, Share, UploadFilled ,Upload,Download} from "@element-plus/icons-vue";
export default {
  components: {
    KnowledgeDrawer,
    Edit,
    Share,
    UploadFilled,
    Upload,
    Download
  },
  data() {
    return {
      // 面包屑
      breadList: [],
      //   文章数据
      tableData: [],
      isHidden: false,
      desc: "",
      name: "",
      formInline: {
        title: "",
        status: "",
      },
      pageCode: 1,
      pageSize: 6,
      total: 0,
      option: ["已发布", "草稿"],
      // 抽屉开关
      drawer: false,
      // 二级抽屉开关
      innerDrawer: false,
      // 评论开关
      delivery: false,
      // 评论添加
      isAdd: true,
      name: "",
      title: "",
      img:'',
    };
  },
  created() {
    this.init();
  },
  methods: {
    ...mapMutations({
      getBreadList: "getBreadList",
      getWorkbench: "getWorkbench",
    }),
    // 初始化页面
    init() {
      this.getBreadList({ breadList: this.$route.meta.breadList });
      this.getWorkbench({ workbench: false });
      this.getKnowledgeLists();
    },
    // 请求数据方法
    async getKnowledgeLists() {
      let flag = "";
      if (this.formInline.status == "已发布") {
        flag = "true";
      } else if (this.formInline.status == "草稿") {
        flag = "false";
      }
      console.log("--------------");
      const res = await asyncKnowledgeLists("/knowledgeLists", {
        user: this.formInline.title,
        status: flag,
        pageCode: this.pageCode,
        pageSize: this.pageSize,
      });
      console.log(res);
      this.tableData = res.data.results;
      this.total = res.data.total;
    },
    // 搜索
    searchChange() {
      this.getKnowledgeLists();
    },
    // 跳转编辑
    edit() {
      console.log(1);
    },
    // 发布线上  草稿
    async publish(v) {
      
      const res=await knowledgePublish('/knowledgePublish',{id:v.id,state:v.state})
      console.log(v.state);
      console.log(res,'fffd')
      this.getKnowledgeLists();
      if(res.data.code===200){
         ElMessage({
          message: res.data.msg,
          type: "success",
        });
      }
    },
    //设置
    set(v) {
      this.drawer = true;
      if (v) {
        this.isAdd = false;
        this.name = v.name;
        this.title = v.title;
        this.img=v.img
      } else {
        this.isAdd=true
      }
      
    },
    // 删除
    async del(v) {
      const res = await asyncDeleteKnowledgeLists("/deleteKnowledgeLists", {
        id: v.id,
      });
      console.log(res);
      this.getKnowledgeLists();
    },
    // 新建
    addKnowLists() {
      // 新建
      this.isAdd = true;
      this.drawer = true;

       this.name = '';
        this.title = '';
        this.img=''
    },
    // 确定
    async confirmClick() {
      this.drawer = false;
      // 新建
      if (this.isAdd) {
        const res = await asyncAddKnowledgeLists("/AddKnowledgeLists", {
          name: this.name,
          title: this.title,
          img:this.img
        });
        console.log(res, "ffff");
        this.getKnowledgeLists();
      } else {
        // 编辑
      }
    },
    //
    open() {
      this.innerDrawer = true;
      // console.log(11)
      // this.$emit('open',{innerDrawer:true})
    },
    // 分页
    handleSizeChange(val) {
      console.log(val, "44");
      this.pageSize = val;
      this.getKnowledgeLists();
    },
    handleCurrentChange(val) {
      this.pageCode = val;
      console.log(val);
      this.getKnowledgeLists();
    },
  },
};
</script>
<style lang="scss" scoped>
.title-card,
.box-card {
  margin-top: 20px;
}
.card-item {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.btns {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.knowledge-card {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  align-items: center;
  justify-content: space-between;
}
.dl {
  width: 30%;
  padding: 10px;
  /* border:1px solid #ccc; */
}
</style>


